<template>
  <div
    class="audio-control ht-0"
    :class="{'audio-hidden': musicControlShow ?false:true}"
  >
    <!-- {[musicControlShow]} -->
    <div class="control-box">
      <p class="left-san"></p>
      <p class="right-san"></p>
      <span v-show="musicControlShow" @click="changeControl" class="iconfont"
        >&#xe648;</span
      >
      <span v-show="!musicControlShow" @click="changeControl" class="iconfont"
        >&#xe623;</span
      >
    </div>
    <div class="margin-auto">
      <div id="aplayer"></div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/APlayer.min.css";

import APlayer from "@/assets/js/APlayer.min.js";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "PlayMusicControl",
  computed: {
    ...mapGetters(["musicUrl", "musicControlShow"]),
  },
  data() {
    return {
      ap: null,
    };
  },
  watch: {
    musicUrl: {
      deep: true,
      handler: function (newData, oldData) {
        let nData = JSON.parse(JSON.stringify(newData));
        let oData = JSON.parse(JSON.stringify(oldData));
        let num = nData.length - oData.length;
        let item1 = nData.splice(oData.length, num);
        this.ap.list.add(item1);
        this.ap.play();
      },
    },
  },
  mounted() {
    this.ap = new APlayer({
      container: document.getElementById("aplayer"),
      lrcType: 1,
      audio: this.musicUrl,
      autoplay: true,
    });
    this.ap.list.hide();
    this.ap.lrc.hide();
  },
  methods: {
    ...mapActions("music", ["SET_CHANGE_MUSIC_CONTROL_SHOW"]),
    changeControl() {
      if (this.musicControlShow) {
        this.ap.list.hide();
        this.ap.lrc.hide();
      }
      this.SET_CHANGE_MUSIC_CONTROL_SHOW();
    },
  },
};
</script>

<style lang="scss" scoped>
.audio-hidden{
  height:0!important;
  transform: translateY(1px);
  // &::after{
  //   bottom:1px!important;
  // }
}
.ht-0 {
  // height:0!important;
  .control-box {
    .left-san {
      position: absolute;
      height: 20px;
      width: 20px;
      right: 40px;
      background-color: rgb(47, 47, 47);
      &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 30px;
        transform: translateX(-7px) translateY(-13px) rotate(45deg);
        background-color: rgb(242, 242, 242);
        left: 0;
        top: 0;
        border-right: 1px solid #fff;
      }
    }
    .right-san {
      position: absolute;
      height: 20px;
      width: 20px;
      left: 40px;
      background-color: rgb(47, 47, 47);
      &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 30px;
        transform: translateX(7px) translateY(-13px) rotate(-45deg);
        background-color: rgb(242, 242, 242);
        left: 0;
        top: 0;
        // border-right: 1px solid #fff;
      }
    }
    user-select: none;
    position: absolute;
    top: -21px;
    width: 40px;
    height: 20px;
    background-color: rgb(47, 47, 47);
    right: 30px;
    text-align: center;
    .iconfont {
      cursor: pointer;
      font-size: 14px;
      color: #fff;
    }
  }
}
.control-show {
  display: none;
}
.audio-control {
  &::after{
    content: "";
    position: absolute;
    left:0;
    right: 70px;
    background-color: rgba(0,0,0,0);
    // background-color: #f00;
    // bottom:60px;
    z-index:-1;
    bottom:1px;
    height:20px;
  }
  box-sizing: border-box;
  border-top: 1px solid rgb(76, 76, 76);
  transition: all 1200ms;
  &:hover {
    height: 60px !important;
    transition: all 600ms;

  }
  ::v-deep .aplayer-icon.aplayer-icon-lrc {
    display: inline-block;
  }
  ::v-deep .aplayer-lrc {
    background-image: url(../../assets/img/music-control-bgi.png);
    background-repeat: no-repeat;
    &::after,
    &::before {
      background: none;
    }
    .aplayer-lrc-contents {
      // color: rgb(152, 152, 152);
      p{
      color:#fff;

      }
      .aplayer-lrc-current {
        color: #fff;
      }
    }
    border-top-right-radius: 6px;
    border: 1px solid #000;
    border-bottom: 1;
    border-left: 0;
    box-sizing: border-box;
    position: absolute;
    bottom: 89px;
    background-color: rgb(54, 54, 54);
    left: 590px;
    width: 400px;
    height: 250px;
    .aplayer-lrc-contents {
      margin-top: 90px;
    }
  }
  ::v-deep .control-show {
    display: none;
  }
  ::v-deep .aplayer-pic {
    height: 50px;
    width: 50px;
  }
  ::v-deep .aplayer-volume {
    background-color: rgb(199, 12, 12) !important;
  }
  ::v-deep .aplayer-played {
    background-color: rgb(199, 12, 12) !important;
  }
  ::v-deep .aplayer-list-cur {
    background-color: rgb(199, 12, 12) !important;
  }
  ::v-deep .aplayer-thumb {
    background-color: rgb(255, 255, 255) !important;
    width: 10px;
    height: 10px;
  }
  ::v-deep .aplayer-list-cur {
    background-color: rgb(199, 12, 12);
  }
  ::v-deep .aplayer-list-hide {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  ::v-deep .aplayer-title {
    color: rgb(232, 232, 232);
  }
  ::v-deep .aplayer-author {
    color: rgb(155, 155, 155) !important;
  }
  ::v-deep #aplayer {
    box-shadow: none;
    overflow: inherit;
    background-image: linear-gradient(#363636, #242424);
    .aplayer-info {
      padding: 0;
      border-bottom: 0;
    }
    .aplayer-body {
      background-image: linear-gradient(#363636, #242424);
    }
    .aplayer-list {
      ol {
        background-image: linear-gradient(#363636, #242424);
        color: #fff;
        li {
          color: rgb(155, 155, 155);
          .aplayer-list-index,
          .aplayer-list-title,
          .aplayer-list-author {
            color: #fff;
          }
          .aplayer-list-title {
          }
          // background-color: rgb(50, 50, 50);

          background-image: linear-gradient(#363636, #242424);
        }
        .aplayer-list-light,
        li:hover {
          background-color: rgb(28, 28, 28);
          background-color: transparent;
        }
      }
      background-image: linear-gradient(#363636, #242424);

      border-top-left-radius: 6px;
      background-color: #363636 !important;

      // border-top-right-radius: 6px;
      border: 1px solid #000;
      border-right: 1px solid rgb(8, 8, 8);

      border-bottom: 1;
      box-sizing: border-box;
      max-height: 250px;
      height: 250px;
      position: absolute;
      left: 0;
      width: 590px;
      /* height: 200px; */
      background: #fff;
      /* overflow: auto; */
      // top: -250px;
      // top: -255px;
      bottom: 96px;
      background-image: url(../../assets/img/music-control-bgi.png);
      background-repeat: no-repeat;
    }
  }
  .margin-auto {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
  }
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 0;
  right: 0;
  // height: 54px;
  height: 60px;
  background-color: #fff;
  background-image: linear-gradient(rgb(54, 54, 54), rgb(36, 36, 36));
}
</style>